<template>
    <el-aside class="aside-bar" :width="width">
        <h1 class="aside-title" v-if="!asideCollapse">电商后台管理</h1>
        <section class="aside-list _scrollbar">
            <el-menu :unique-opened="true" :collapse="asideCollapse" @select="selectMune" :router="true" :collapse-transition="false" :default-active="activeIndex" text-color="#fff" background-color="#20222b" active-text-color="#1296db">
                <template v-for="(item, index) in AsideList">
                    <el-menu-item v-if="!item.children.length" :index="item.index" :route="item.route" :key="index">
                        <icon :class-name="item.icon"></icon>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                    <el-submenu v-else :index="item.index" :key="index">
                        <template slot="title">
                            <icon :class-name="item.icon"></icon>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(col, i) in item.children" :key="i" :index="col.index" :route="col.route">
                            <icon></icon>
                            <span slot="title">{{col.title}}</span>
                        </el-menu-item>        
                    </el-submenu>
                </template>
            </el-menu>
        </section>
    </el-aside>
</template>

<script>
import { mapState } from 'vuex'

import AsideList from "@/utlis/asideList.js"
export default {
    name: 'Aside',
    computed: {
        ...mapState(['asideCollapse', 'asideItem', 'activeIndex']),
        width() {
            return this.asideCollapse? 'auto' : '150px'
        }
    },
    methods: {
        // 菜单激活
        selectMune(index) {
            this.$store.commit('getActiveIndex', index)
            this.getAsideMenu(index)
        },
        // 获取侧栏菜单
        getAsideMenu(index) {
            const asideItem = this.asideItem
            AsideList.forEach(item => {
                // 如果父级不存在，往子集去找
                if(item.index == index){
                    // 判断储存的是否存在,不存在就保存
                    if(!this.asideItem.filter(v => v.index == index).length){
                        asideItem.push(item)
                    }
                }else{
                    item.children.forEach(val => {
                        if(val.index == index){
                            // 判断储存的是否存在,不存在就保存v
                            if(!this.asideItem.filter(v => v.index == index).length){
                                asideItem.push(val)
                            }
                        }
                    })
                }   
            });
            this.$store.commit('getAsideItem', asideItem)
        }
    },
    data() {
        return {
            AsideList
        }
    },
    mounted() {
        // 初始化
        this.getAsideMenu(this.activeIndex)
    }
}
</script>

<style lang="scss" scoped>
    .el-menu{
        border: none;
    }
    .aside-bar{
        height: 100%;
        background: $bg-color-black;
        color: $text-color;
        display: flex;
        flex-direction: column;
        border-right: solid 1px $border-color;
        overflow: hidden;
        .aside-title{
            width: 100%;
            font-size: $font-size-md;
            box-sizing: border-box;
            overflow: hidden;
            display:flex;
            align-content: center;
            justify-content: center;
        }
        .aside-list{
            width: 100%;
            height: 100%;

            flex: 1;
        }
    }
</style>